<template>
  <div class="tab">
    <div class="tab-item">
      <span class="home-icon ion-ios-home"></span>
      <router-link :to="{path: '/index'}">主页</router-link>
    </div>
    <div class="tab-item">
      <span class="num">5z</span>
      <router-link :to="{path: '/tea'}">茶会</router-link>
    </div>
    <div class="tab-item">
      <span class="num">5z</span>
      <router-link :to="{path: '/movie'}">电影</router-link>
    </div>
    <div class="tab-item">
      <span class="num">55</span>
      <router-link :to="{path: '/book'}">本子</router-link>
    </div>
    <div class="tab-item">
      <span class="num">55</span>
      <router-link :to="{path: '/music'}">音乐</router-link>
    </div>
    <div class="tab-item">
      <span class="num">55</span>
      <router-link :to="{path: '/book'}">资源</router-link>
    </div>
  </div>
</template>

<script>
    export default {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .tab{
    width: 1160px;
    height: 50px;
    margin: 0 auto;
    .tab-item{
      display: inline-block;
      padding-left: 0;
      padding-right: 20px;
      padding-top: 10px;
      text-align: center;
      &:hover{
        a{
          color: #1D8CE0;
        }
      }
      &:last-child{
        padding-right: 0;
      }
      a{
        line-height: 25px;
        font-size: 14px;
        color: #222;
      }
      .num{
        display: block;
        font-size: 12px;
        line-height: 18px;
        background: rgb(255, 175, 201);
        border-radius: 4px;
        color: #fff;
      }
      .home-icon{
        display: block;
        line-height: 18px;
        color: rgb(255, 175, 201);

      }
    }
  }
</style>
